// 全选按钮的 点击事件------循环监听
// 获取当前点击的全选按钮的 checked 属性值
// 将所有的子复选框的checked 属性值 = 当前全选按钮的属性值
// 将所有的全选按钮的checked 属性值 = 当前全选按钮的属性值

let alls = document.querySelectorAll('.all');
let singles = document.querySelectorAll('.single');
let addbtns = document.querySelectorAll('.add');
let reducebtns = document.querySelectorAll('.reduce');
let priceDoms = document.querySelectorAll('.price');
let numinps = document.querySelectorAll('.num');
let minTotalDoms = document.querySelectorAll('.min-total');
let gross = document.querySelector('.gross');
let pricesq = document.querySelector('.prices');

console.log(alls);
console.log(singles);

for (let i = 0; i < alls.length; i++) {
    alls[i].addEventListener('click', function () {
        let status = alls[i].checked;
        for (let j = 0; j < singles.length; j++) {
            singles[j].checked = status;
        }
        alls[0].checked = status;
        alls[1].checked = status;

        grossprice()

    })


}



// 循环监听   子复选框的点击事件 
for (let i = 0; i < singles.length; i++) {
    singles[i].addEventListener('click', function () {
        // 定义默认选中个数
        let count = 0;
        // 循环子复选框  判断每一个子复选框的 checked 属性
        for (let j = 0; j < singles.length; j++) {
            // 有一个子复选框的 checked 属性 == true(表示被选中状态)   count++
            if (singles[j].checked == true) {
                count++;
            }
            // 循环结束 count值 就代表 被选中的个数
            // 如果count == 子复选框的个数 表示全部选中
            // 如果全选  更改全选按钮的 checked 属性值 为 true
            // 否则 更改全选按钮的 checked 属性值 为 false
            if (singles.length == count) {
                alls[0].checked = true;
                alls[1].checked = true;
            } else {
                alls[0].checked = false;
                alls[1].checked = false;
            }

            grossprice()


        }
    })
}






// let grossDoms = document.querySelector('.gross');
// let pricesDoms = document.querySelector('.prices');
// console.log(pricesDoms)

// console.log(addbtns)


// 循环监听
for (let i = 0; i < addbtns.length; i++) {
    // 获取原来的 对应的 num 的数据，将这个数据+1  又输出给num input框
    // 获取对应的 单价 *  num的最新数据 ==== 对应的 min-total
    addbtns[i].addEventListener('click', function () {
        //获取对应的input框的数据 转换为 整数
        let num = parseInt(numinps[i].value);
        num = num + 1;
        numinps[i].value = num;
        //获取对应的单价     
        let price = parseFloat(priceDoms[i].innerText);
        //计算小计    小计= 单价*数量
        let min = price * num;
        //覆盖内容赋值 innerText
        // 数字.toFixed(2)
        minTotalDoms[i].innerText = min.toFixed(2);
        grossprice()
        
    })
    reducebtns[i].addEventListener('click', function () {
        //获取对应的input框的数据 转换为 整数
        let num = parseInt(numinps[i].value);
        if (num < 2) {
            num = 1;
        } else {
            num--;
        }
        numinps[i].value = num;
        //获取对应的单价
        let price = parseFloat(priceDoms[i].innerText);
        //计算小计    小计= 单价*数量
        let min = price * num;
        minTotalDoms[i].innerText = min.toFixed(2);
        grossprice()
        
    })

}



function grossprice() {
    //1.总量
    let sum = 0;
    //2.总价
    let sumPrice = 0;
    for (let m = 0; m < singles.length; m++) {
        if (singles[m].checked == true) {
            sum += parseInt(numinps[m].value);
            sumPrice += parseFloat(minTotalDoms[m].innerText)
        }
    }
    console.log(sumPrice)
    gross.innerText = sum;
    pricesq.innerText = sumPrice.toFixed(2);
}
// // 选中的子复选框  对应的 数量 之 和 就是 总量
// // 选中的子复选框  对应的 小计之 和 就是 总价
// // 定义两个变量
// //1.总量
// let sum = 0;
// //2.总价
// let sumPrice = 0;
// //循环所有的子复选框---判断该复选框是否选中
// for (let m = 0; m < singles.length; m++) {
//     if (singles[m].checked == true) {
//         //如果选中 ---获取该子复选框 对应的  数量
//         //对应的数量累加 到 sum
//         sum += parseInt(numinps[m].value);
//         sumPrice += parseFloat(minTotalDoms[m].innerText)
//     }

// }
// grossDoms.innerText = sum;
// pricesDoms.innerText = sumPrice.toFixed(2);



